<template>
  <div class="addcontain">
    <van-nav-bar
      class="page-nav-bar"
      :title="editId ? '修改地址':'添加地址'"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- 
      area-list 地区列表数据
      area-columns-placeholder	地区选择列占位提示文字
      show-postal	是否显示邮政编码
      show-delete	是否显示删除按钮
      show-set-default	是否显示默认地址栏
      address-info 收货人信息初始值
     -->
    <van-address-edit
      :area-list="areaList"
      show-postal
      show-set-default
      :show-delete="editId ? true:false"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSubmit"
      @delete="onDelete"
      v-if="!editId"
    />
    <van-address-edit
      v-if="editId && isShow"
      :area-list="areaList"
      show-postal
      :address-info="addressInfo"
      show-set-default
      :show-delete="editId ? true:false"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSubmit"
      @delete="onDelete"
    />
  </div>
</template>

<script>
import { addAddress, editAddress,delAddress,getAddressDetail } from "@/api/address";
import { areaList } from '@vant/area-data';
export default {
  data() {
    return {
      areaList,  // 地区列表
      addressInfo:{},  // 地址信息
      editId:this.$route.query.id,
      isShow:false 
    };
  },
  created () {
    this.$route.query.id && this.getDetail(this.$route.query.id)
  },
  methods: {
    // 获取详情
    async getDetail(id){
        let {
          region,province, postCode, phoneNumber ,areaCode,
          name ,detailAddress, defaultStatus, city
        } = await getAddressDetail(id)
        this.addressInfo.city = city
        this.addressInfo.isDefault = defaultStatus === 1 
        this.addressInfo.addressDetail = detailAddress
        this.addressInfo.name = name
        this.addressInfo.tel = phoneNumber
        this.addressInfo.postalCode = postCode
        this.addressInfo.province = province
        this.addressInfo.county = region
        this.addressInfo.areaCode = areaCode
        this.isShow = true
    },
    async onSubmit(value){
      const data ={
        city:value.city,  // 城市
        defaultStatus: value.isDefault ? 1:0,  // 是否为默认
        detailAddress:value.addressDetail, // 详细地址(街道)
        name:value.name, // 收货人名称
        phoneNumber:value.tel, // 手机号
        postCode:value.postalCode, // 邮政编码
        province:value.province, // 省份/直辖市 
        region:value.county,  // 区县
        areaCode:value.areaCode  // 地区编码(重要字段)
      }
      if(this.editId){
        await editAddress({...data, id:this.editId })
        this.$toast.success('修改成功')
      }else{
        await addAddress(data)
        this.$toast.success('添加成功')
      }
      this.$router.back()
    },
    async onDelete() {
      await delAddress(this.editId);
      this.$toast.success("删除成功");
      this.$router.back()
    },
  },
  
};
</script>
<style lang="less" scoped>
.form {
  padding: 0 30px;
}
.item {
  padding-top: 20px;
  font-size: 30px;
  height: 110px;
}
.isda {
  display: flex;
  justify-content: center;
  align-items: center;
}
.btnlist {
  height: 100px;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;

  display: flex;
  .sub {
    background-color: #333;
    height: 100%;
    color: #fff;
    border: unset;
  }
  .close {
    height: 100%;
    color: #fff;
    border: unset;
    background-color: #e11c34;
  }
}
</style>